<template>
    <div>
        <p>非响应式数据：{{ name }}</p>
        <p>ref:{{ age }}</p>
        <p>reactive:{{ user.hopy }}</p>
        <button @click="change">修改信息</button>
        <ceshiComp></ceshiComp>
    </div>
</template>

<script setup>
// 3.2语法
// 解决Vue3.0中setup需要频繁将声明的变量、函数以及import引入的内容通过return向外暴露，
// 才能在 < template /> 使用的问题

// 引入基础模块
import { ref, reactive, onMounted } from "vue"
// 引入自定义组件
import ceshiComp from "../components/ceshi.vue"

// 定义页面数据 不需要return  暴露给template
let name = "李四"
let age = ref(20)
let user = reactive({ id: 1, hopy: "足球" })

function change() {
    age.value = 18
    user.hopy = "篮球"
}


</script>

<style scoped></style>